<template>
    <div id="temp">
        <!--咨询详情展示部分  -->
        <h3>{{content.title}}</h3>
        <p class="date">{{content.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}} &nbsp;
            <span>{{content.click}}次浏览</span>
        </p>
        <hr/>
        <div v-html="content.content" id="_content"></div>
    
        <!--评论部分  -->
        <comment :id="id">
            
        </comment>
    </div>
</template>
<script>

//导入全局域名
import common from '../../kits/common.js';

//导入提示小组件
import { Toast } from 'mint-ui';

//导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
    data() {
        return {
            id: 13,
            content: ''
        }
    },
    components: {
        comment
    },
    created() {
        this.id = this.$route.params.id;
        this.getData();
    },
    updated() {
        var tempWidth = document.getElementById("temp").offsetWidth - 40,
            imgs = document.querySelectorAll("p img");
        imgs.forEach(function (v) {
            v.style.width = tempWidth + "px";
        })
    },
    methods: {
        getData() {
            this.$http.get(common.urlHost + "/api/getnew/" + this.id)
                .then(function (res) {
                    if (res.body.status != 0) {
                        Toast({
                            message: res.body.message,
                            duration: 3000
                        });
                        return;
                    }
                    this.content = res.body.message[0];
                });
        }
    }
}
</script>
<style scoped>
#temp {
    padding: 4%;
}

h3 {
    font: 18px/20px "Microsoft Yahei";
    color: #26a2ff;
    font-weight: 800;
}

.date {
    margin: 10px 0;
    font-size: 13px;
    color: #cdcdcd;
}

#temp img {
    width: 300px;
}
</style>


